<template>
  <div>
    <a-table
      :rowKey="(item) => item.id"
      :columns="columns"
      :data-source="taskProgressList"
      class="components-table-demo-nested"
    >
      <a slot="operation" slot-scope="text">催填</a>
      <span slot="privateStatus" slot-scope="text">
        <span v-if="text.privateStatus == 1"
          ><a-badge color="#a7a8ad" />{{ text.privateStatusDictText }}</span
        >
        <span v-if="text.privateStatus == 2"
          ><a-badge color="#ff4d4f" />{{ text.privateStatusDictText }}</span
        >
        <span v-if="text.privateStatus == 3"
          ><a-badge color="#f5a623" />{{ text.privateStatusDictText }}</span
        >
        <span v-if="text.privateStatus == 4"
          ><a-badge color="#4bc076" />{{ text.privateStatusDictText }}</span
        >
      </span>

      <a-table
        :rowClassName="rowClassName"
        style="padding: 0"
        slot="expandedRowRender"
        slot-scope="text"
        :columns="innerColumns"
        :data-source="text.taskLines"
        :rowKey="(item) => item.id"
        :pagination="false"
        size="small"
      >
        <span slot="status" slot-scope="text" style="width: 10%">
          <span v-if="text.fillingStatus == 1"
            ><a-badge color="#a7a8ad" />未填报</span
          >
          <span v-else><a-badge color="#87d068" />已填报</span></span
        >
        <span
          slot="operation"
          slot-scope="text"
          class="table-operation"
          style="width: 10%"
        >
          <a-dropdown>
            <a-menu slot="overlay">
              <a-menu-item> 填报 </a-menu-item>
              <!-- <a-menu-item> 审核 </a-menu-item> -->
            </a-menu>
            <a> 操作 <a-icon type="down" /> </a>
          </a-dropdown>
        </span>
      </a-table>
    </a-table>
  </div>
</template>
<script>
const columns = [
  { title: "填报任务", dataIndex: "taskName", key: "taskName" },
  { title: "填报人", dataIndex: "informant", key: "informant" },
  {
    title: "填报任务状态",
    scopedSlots: { customRender: "privateStatus" },
    key: "privateStatus",
  },
  { title: "更新时间", dataIndex: "createTime", key: "createTime" },
  {
    title: "操作",
    key: "operation",
    scopedSlots: { customRender: "operation" },
  },
];

const innerColumns = [
  {
    title: "设施名称",
    key: "facilitiesName",
    dataIndex: "facilitiesName",
  },
  {
    title: "排放源",
    key: "boundaryName",
    dataIndex: "boundaryName",
  },
  {
    title: "填报时间",
    key: "updateTime",
    dataIndex: "updateTime",
  },
  { title: "填报状态", key: "status", scopedSlots: { customRender: "status" } },
  {
    title: "排放量 单位：tCO₂e",
    key: "emission",
    dataIndex: "emission",
  },
  {
    title: "操作",
    key: "operation",
    scopedSlots: { customRender: "operation" },
  },
];

export default {
  props: ["taskProgressList"],
  data() {
    return {
      columns,
      innerColumns,
    };
  },
  methods: {
    rowClassName(record, index) {
      let className = "level1";
      return className;
    },
  },
};
</script>
<style >
/* .ant-table-row-level-0 td {
  width: 20% ;
}*/
.level1 td {
  width: 10% !important;
  padding: 8px 8px !important;
}
.level1 td:last-child {
  width: 5% !important;
  padding: 8px 8px !important;
}
</style>